<template>
	<a-spin :spinning="isLoading">
		<page-layout>
			<a-form ref="formRef" :model="formState.state" >
			<a-row :gutter="[10, 10]">
        <footer-button :buttons="formState.buttons" />
				<a-col :span="24">
					<div class="pre-title">{{t('order-manage.title.studentInformation')}}</div>
					<a-card>
						<a-row>
							<a-button type="primary" class="mb-20" @click="openDialog('student')">
								{{t('order-manage.title.selectstu')}}
							</a-button>
						</a-row>
						<a-row>
							<a-col :span="6">
								<a-form-item :label="t('order-manage.label.stuName')">{{formState.state.stuname}}</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item :label="t('order-manage.title.stuuniversity')">{{formState.state.stuuniversity}}</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item :label="t('order-manage.title.stuzjNum')">{{formState.state.stuzjNum}}</a-form-item>
							</a-col>
							<a-col :span="6">
								<a-form-item :label="t('order-manage.title.urgPhone')">{{formState.state.stutel}}</a-form-item>
							</a-col>
						</a-row>
					</a-card>
					<div class="pre-title">{{t('order-manage.title.RegistrationInformation')}}</div>
					<a-card>
						<a-row>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.label.school')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-input v-model:value="formState.state.schoolName" readonly :placeholder="t('placeholder.pleaseSelect')">
										<template #addonAfter>
											<div class="primary-color cursor-pointer"
												@click="openDialog('universityVisible')">{{t('button.select')}}</div>
										</template>
									</a-input>
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.openDialog.semester')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-select v-model:value="formState.state.semester">
										<a-select-option v-for="item in dictLists.data['semester']" :key="item.id"
											:value="item.value">{{ item.label }}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.title.selectyear')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-select v-model:value="formState.state.selectyear">
										<a-select-option v-for="item in dictLists.data['years']" :key="item.id"
											:value="item.value">{{ item.label }}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.title.selectquarter')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-select v-model:value="formState.state.selectquarter">
										<a-select-option v-for="item in dictLists.data['quarter']" :key="item.id"
											:value="item.value">{{ item.label }}</a-select-option>
									</a-select>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="12">
								<a-form-item :label="t('order-manage.title.addcourse')">
									<a-button type="primary" class="ml-20" @click="openDialog('course')">{{t('order-manage.openDialog.selectcourse')}}</a-button>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row class="list_t">
							<a-col :span="4">
								<a-form-item>{{t('order-manage.openDialog.courseName')}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{t('order-manage.openDialog.courseCode')}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{t('placeholder.startTime')}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{t('placeholder.endTime')}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{t('order-manage.openDialog.price')}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{t('button.operation')}}</a-form-item>
							</a-col>
						</a-row>
						<a-row class="list_t" v-for="(item,index) in formState.state.course" :key="index">
							<a-col :span="4">
								<a-form-item>{{item.name}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{item.code}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{item.starttime}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{item.endtime}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-form-item>{{item.price}}</a-form-item>
							</a-col>
							<a-col :span="4">
								<a-button type="danger" class="ml-20" @click="detele(index)">{{t('button.delete')}}</a-button>
							</a-col>
						</a-row>
					</a-card>
					<div class="pre-title">{{t('order-manage.title.Paymentinformation')}}</div>
					<a-card>
						<a-row>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.title.favouredpolicy')">
									<a-button type="primary" class="ml-20" @click="openDialog('sale')">{{t('order-manage.title.selfavouredpolicy')}}</a-button>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="6">
								<a-form-item :label="t('order-manage.title.is_t_sale')">
									<a-radio-group v-model:value="formState.state.is_t_sale">
										<a-radio v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">{{ item.label }}</a-radio>
									</a-radio-group>
								</a-form-item>
							</a-col>
							<a-col v-if='formState.state.is_t_sale==1' :span="8">
								<a-form-item :label="t('order-manage.title.saleprice')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-input placeholder="" />
								</a-form-item>
							</a-col>
							<a-col v-if='formState.state.is_t_sale==1' :span="8">
								<a-form-item :label="t('order-manage.title.remark')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-input placeholder="" />
								</a-form-item>
							</a-col>
						</a-row>
						<a-row>
							<a-col :span="6">
								<a-form-item :label="t('order-manage.title.is_pay_deposit')">
									<a-radio-group v-model:value="formState.state.is_pay_deposit">
										<a-radio v-for="item in dictLists.data['yerOrON']" :key="item.id" :value="item.value">{{ item.label }}</a-radio>
									</a-radio-group>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row v-if='formState.state.is_pay_deposit==1'>
							<a-row>
								<a-col :span="8">
									<a-button type="primary" class="mb-20" @click="openDialog('Deposit')">{{t('order-manage.title.selectdeposit')}}</a-button>
								</a-col>
							</a-row>
							<a-row>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.fknum')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.sknum')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.fktime')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.fktype')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.fkprice')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.pricetype')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
								<a-col :span="8">
									<a-form-item :label="t('order-manage.title.de_prcie')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-input placeholder="" />
									</a-form-item>
								</a-col>
							</a-row>
							<a-row>
								<a-col :span="24">
									<a-form-item :label="t('order-manage.title.Paymentvoucher')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
										<a-image :width="200"
											src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
									</a-form-item>
								</a-col>
							</a-row>
						</a-row>
						<a-row>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.title.totalprice')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-input placeholder="" />
								</a-form-item>
							</a-col>
							<a-col :span="8">
								<a-form-item :label="t('order-manage.title.paytotalprice')" :labelCol="{ span: 6 }" :wrapperCol="{ span: 16 }">
									<a-input placeholder="" />
								</a-form-item>
							</a-col>
						</a-row>
					</a-card>
				</a-col>
			</a-row>
			</a-form>
			<BasicTableModal v-model:visible="modalConfig.show" v-if="modalConfig.show"
				:columns="modalConfig.commonColumns" :fetchAjax="modalConfig.api" :title="modalConfig.title"
				:searchForm="modalConfig.searchForm"
				@selectUniversity="value => selectItem(value,modalConfig.currentType)" />
		</page-layout>
	</a-spin>
</template>
<script setup>
	import {
		save,
		selectById,
		update,
		salepage,
		depositPage
	} from "@/api/module/student/order-manage";
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		getDictByCodesReturnObj
	} from '@/tools/get-dict'
	import dictEnum from '@/const/dict'
	import {
		page as studentpage
	} from '@/api/module/student/student-manage'
	import {
		page as schoolPage
	} from '@/api/module/school'
	import {
		page as coursePage
	} from '@/api/module/courseBaseInfo'

	import BasicTableModal from '@/component/basic-table-modal'

	import {
		page as userPage
	} from '@/api/module/user'

	import {
		message
	} from "ant-design-vue";
	import moment from 'moment';
  import { useI18n } from "vue-i18n";
  const  { t } = useI18n();
	let isLoading = ref(false)
	const formRef = ref();
	const route = useRoute()
	const router = useRouter()
	const formState = reactive({
		buttons: [{
				name: 'save',
				event: () => onSubmit(),
				type: "primary",
				code: ''
			},
			{
				name: 'reset',
				event: () => resetForm(),
				code: ''
			}
		],
		state: {
      buspId:'',
			stuname: '',
			stuuniversity: '',
			stuzjNum: '',
			stutel: '',

			schoolName: '',
			semester: '',
			selectschool: '',
			selectyear: '',
			selectquarter: '',

			course: [],

			is_t_sale: null,
			is_pay_deposit:null,
		}
	});
	const saveKey = "save";
	const labelCol = {
		span: 6
	}
	const wrapperCol = {
		span: 18
	}
	let dictLists = reactive({
		data: {}
	})
	const modalConfig = reactive({
		title: '选择学校',
		api: '',
		show: false,
		currentType: '',
		commonColumns: [],
		universityColumns: [],
		responsibleColumns: [],
		searchForm:[],
		studentSearchForm:[{ label: t('order-manage.label.stuName'), key: 'stuName', type: 'input', placeholder: t('placeholder.pleaseEnter')}],
		schoolSearchForm:[{ label: t('order-manage.openDialog.schoolname'), key: 'schoolCnName', type: 'input', placeholder: t('placeholder.pleaseEnter')}],
		courseSearchForm:[{ label: t('order-manage.openDialog.courseName'), key: 'courseName', type: 'input', placeholder: t('placeholder.pleaseEnter')}],
		saleSearchForm:[{ label: t('order-manage.title.favouredpolicy'), key: 'preName', type: 'input', placeholder: t('placeholder.pleaseEnter')}],
	})
	const formRules = {
		contactsName: [{
			required: true,
			message: '请输入联系人姓名',
			trigger: 'blur'
		}],
		contactsDepartment: [{
			required: true,
			message: '请输入所属部门',
			trigger: 'blur'
		}]
	};

	onMounted(async () => {
		formRef.value.resetFields()

		dictLists.data = await getDictByCodesReturnObj([
			dictEnum.CLASS_STATUS,
			dictEnum.PAY_STATUS,
			dictEnum.FOLLOW_PROGRESS,
			dictEnum.YEARS,
			dictEnum.SEMESTER,
			dictEnum.QUARTER,
      dictEnum.YES_OR_NO,
		])
		modalConfig.studentColumns = [{
				dataIndex: "stuName",
				key: "name",
				title: t('order-manage.label.stuName')
			},
			{
				dataIndex: "school",
				key: "school",
				title: t('order-manage.label.school')
			},
			{
				dataIndex: "semester",
				key: "semester",
				title: t('order-manage.label.colBtime')
			},
			{
				dataIndex: "updateTime",
				key: "updateTime",
				title: t('order-manage.label.updateTime'),
				cellRender: (record, data) => {
					return moment(data).format('YYYY-MM-DD HH:mm:ss')
				}
			},
			{
				dataIndex: "curStatus",
				key: "curStatus",
				title: t('order-manage.label.classSts'),
				cellRender: (record, data) => {
					if (dictLists.data[dictEnum.CLASS_STATUS]) {
						const item = dictLists.data[dictEnum.CLASS_STATUS].find(
							v => v.value == data
						);
						return item ? item.label : "";
					}
				}
			},
			{
				dataIndex: "payStatus",
				key: "payStatus",
				title: t('order-manage.label.payStatus'),
				cellRender: (record, data) => {
					if (dictLists.data[dictEnum.PAY_STATUS]) {
						const item = dictLists.data[dictEnum.PAY_STATUS].find(
							v => v.value == data
						);
						return item ? item.label : "";
					}
				}
			},
		]
		modalConfig.universityColumns = [
			// {
			// 	dataIndex: "schoolCnName",
			// 	key: "schoolCnName",
			// 	title: t('order-manage.openDialog.schoolname')
			// },
			{
				dataIndex: "schoolEnName",
				key: "schoolEnName",
				title: t('order-manage.openDialog.schoolEnName')
			},
			{
				dataIndex: "schFollowUpProgress",
				key: "schFollowUpProgress",
				title: t('order-manage.openDialog.schFollowUpProgress'),
				cellRender: (record, data) => {
					if (dictLists.data[dictEnum.FOLLOW_PROGRESS]) {
						const item = dictLists.data[dictEnum.FOLLOW_PROGRESS].find(v => v.value ==
							data)
						return item ? item.label : ''
					}
					return ''
				}
			},
		]
		modalConfig.courseColumns = [{
				dataIndex: "courseCode",
				key: "courseCode",
				title: t('order-manage.openDialog.courseCode')
			},
			{
				dataIndex: "courseName",
				key: "courseName",
				title: t('order-manage.openDialog.courseName')
			},
			{
				dataIndex: "projectName",
				key: "projectName",
				title: t('order-manage.openDialog.projectName')
			},
			{
				dataIndex: "semester",
				key: "semester",
				title: t('order-manage.openDialog.semester')
			},
			{
				dataIndex: "credit",
				key: "credit",
				title: t('order-manage.openDialog.credit')
			},
		]
		modalConfig.saleColumns = [{
				dataIndex: "preName",
				key: "preName",
				title: t('order-manage.title.favouredpolicy')
			},
			{
				dataIndex: "discount",
				key: "discount",
				title: t('order-manage.title.sale')
			}
		]
	})
	const detele = sendIndex => formState.state.course.splice(sendIndex, 1)
	const resetForm = () => {
		formRef.value.resetFields()
	}
3
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			isLoading = true
			if (route.query.id) {
				updateItem(formState.state)
			} else {
				saveItem(formState.state)
			}
		})
	};

	const saveItem = (data) => {
		save(data).then(res => {
			if (res.code === 200) {
				message.success(res.message)
				router.push('/studentrtv/order-manage')
			}
			if (res.code === 500) return message.error(res.msg || '新增失败，服务器错误')
			isLoading = false
		}).catch(() => isLoading = false)
	}

	const updateItem = (data) => {
		update(data).then(res => {
			if (res.code === 200) {
				message.success(res.message)
				router.push('/studentrtv/order-manage')
			}
			if (res.code === 500) return message.error(res.msg || '编辑失败，服务器错误')
			isLoading = false
		}).catch(() => isLoading = false)
	}

	const openDialog = (type) => {
		modalConfig.currentType = type
		modalConfig.show = true
		if (type === 'student') {
			modalConfig.commonColumns = modalConfig.studentColumns
			modalConfig.api = studentpage
			modalConfig.title = t('order-manage.title.selectstu')
			modalConfig.searchForm=modalConfig.studentSearchForm
		} else if (type === 'universityVisible') {
			modalConfig.commonColumns = modalConfig.universityColumns
			modalConfig.api = schoolPage
			modalConfig.title = t('order-manage.openDialog.selectschool')
			modalConfig.searchForm=modalConfig.schoolSearchForm
		} else if (type === 'course') {
			modalConfig.commonColumns = modalConfig.courseColumns
			modalConfig.api = coursePage
			modalConfig.title = t('order-manage.openDialog.selectcourse')
			modalConfig.searchForm=modalConfig.courseSearchForm
		} else if (type === 'sale') {
			modalConfig.commonColumns = modalConfig.saleColumns
			modalConfig.api = salepage
			modalConfig.title = t('order-manage.title.selfavouredpolicy')
			modalConfig.searchForm=modalConfig.saleSearchForm
		} else if (type === 'Deposit') {
			modalConfig.commonColumns = modalConfig.depositColumns
			modalConfig.api = depositPage
			modalConfig.title = t('order-manage.openDialog.selectdeposit')
		}
	}
	const closeDialog = () => {
		modalConfig.show = false
	}
	const selectItem = (value, type) => {
		console.log(value)
		if (type === 'student') {
      formState.state.buspId = value.id
			formState.state.stuname = value.stuName
			formState.state.stuuniversity = value.school
		} else if (type === 'universityVisible') {
			formState.state.schoolName = value.schoolEnName;
		} else if (type === 'course') {
			formState.state.course.push({
				name: value.courseName,
				code: value.courseCode,
				starttime: moment(value.periodStartMonth).format('YYYY-MM-DD'),
				endtime: moment(value.periodEndMonth).format('YYYY-MM-DD'),
				price: '',
			})
		} else if (type === 'sale') {
			console.log(value)
		}
	}
</script>
<style scoped>
	.pre-title {
		padding: 10px 25px;
		background-color: #f5f5f5;
		color: #555;
	}
</style>
